<template>
  <div>
    <div id="counter">{{ count }}</div>
    <button id="btn" @click="count += 1">+1</button>
  </div>
</template>
<script>
export default {
  name: 'o1-data',
  // 这个是生命周期函数, 现在先不管, 这里用到是因为在mounted中可以拿到dom元素
  /*mounted() {
    // 非响应式数据
    let count = 0;
    // 将count渲染
    const counter = document.getElementById("counter");
    counter.innerHTML = count
    // 改变count的方法, 注意改变后页面是否变化
    const btn = document.getElementById("btn")
    btn.addEventListener("click", () => {
      count += 1
      console.log(count)
    })
  }*/
  data() {
    return {
      count: 0
    }
  },
}
</script>